<template>
  <div class="danye">
    <!-- 搜索框 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>充值订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表格 -->
    <div class="mar-top">
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input
          v-model="searchCreateTime"
          placeholder="按创建时间搜索"
          style="width: 200px; margin-bottom: 10px; margin-right: 1rem"
          clearable
        ></el-input>
        <el-input
          v-model="searchStatus"
          placeholder="按状态搜索"
          style="width: 200px; margin-bottom: 10px; margin-right: 1rem"
          clearable
        ></el-input>
        <el-input
          v-model="searchRecordNumber"
          placeholder="按记录编号搜索"
          style="width: 200px; margin-bottom: 10px"
          clearable
        ></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <el-table border :data="records" style="width: 100%" stripe>
        <!-- 表头定义 -->
        <el-table-column prop="order_number" label="订单号"></el-table-column>
        <el-table-column prop="amount" label="充值金额"></el-table-column>
        <el-table-column
          prop="recharge_time"
          label="充值时间"
        ></el-table-column>
        <el-table-column prop="user.username" label="用户名"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status ? "已支付" : "未支付" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              :disabled="!scope.row.status ? false : true"
              @click="confirmPayment(scope.row)"
            >
              {{ !scope.row.status ? "确认支付" : "完成支付" }}
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >

            <!-- 其他操作按钮 -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
    <!-- <WDialog :mode="mode" ref="Dialog"></WDialog> -->
  </div>
</template>

<script>
import { deleteid, confirmPayment, list } from "@/api/recharge";
import WDialog from "@/views/account/dialog.vue";
import { Message } from "element-ui";
import serveStatic from "serve-static";
export default {
  // components: {
  //   WDialog,
  // },
  data() {
    return {
      records: [], // 表格数据
      size: 10,
      current: 1,
      total: 1,
      mode: "",
      searchCreateTime: "", // 搜索姓名
      searchStatus: "", // 搜索用户名
      searchRecordNumber: "",
      rules: {
        w_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        // 其他表单项...
      },
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    handleSearch() {
      const param = {
        ...(this.searchRecordNumber && {
          searchRecordNumber: this.searchRecordNumber,
        }),
        ...(this.searchStatus && { searchStatus: this.searchStatus }),
        ...(this.searchCreateTime && {
          searchCreateTime: this.searchCreateTime,
        }),
      };
      this.loadData(param);
    },

    //确认支付
    async confirmPayment(val) {
      console.log(val);
      const param = {
        recordid: val.recordId,
        userid: val.userid,
        amount: val.amount,
        ordernumber: val.order_number,
      };
      const res = await confirmPayment(param);
      if (res.code == 200) {
        Message(res.message);
        // 假设有一个 dataId 是当前确认支付的项的 reservation_id
        const updatedReservationId = val.recordId; // 你需要替换为实际的 reservation_id

        // 更新前端数据
        const index = this.records.findIndex(
          (item) => item.recordId === updatedReservationId
        );
        if (index !== -1) {
          // 假设确认支付后的状态为 '已支付'，你需要替换为实际的状态
          this.$set(this.records, index, {
            ...this.records[index],
            status: 1,
          });
        }
      } else {
        Message(res.message);
      }
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadData();
    },
    handleSizeChange(val) {
      console.log(val);
      this.size = val;
      this.loadData();
    },
    // 处理修改操作

    async loadData(array) {
      const param = {
        size: this.size,
        current: this.current,
      };

      const res = await list(param, array);
      if (res.code == 200) {
        this.records = res.data.list.records;
        this.size = res.data.list.size;
        this.current = res.data.list.current;
        this.total = res.data.list.total;
      }
    },
    // 处理删除操作
    async handleDelete(row) {
      // 实现删除逻辑，根据需求发送请求等
      const res = await deleteid(row.recordId);
      if (res.code == 200) {
       
        const index = this.records.findIndex(
          (item) => item.recordId === row.recordId
        );
        if (index !== -1) {
          this.records.splice(index, 1); // 从数组中移除对应的数据行
        } Message(res.message);
      } else {
        Message(res.message);
      }
    },

    showAddDialog() {
      this.mode = "add";
      this.$refs.Dialog.form = [];
      this.$refs.Dialog.dialogVisible = true;
    },
  },
};
</script>
